<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>

  <style>
    .slider {
      margin: 5px;
      width: 310px;
      height: 15px;
      border-radius: 5px;
      background: #E0E0E0;
      background: -moz-linear-gradient(left top, #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
      background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
      background: linear-gradient(left top, #E0E0E0, #EEEEEE);
    }
    
    .thumb {
      position: relative;
      top: -5px;
      left: 10px;
      width: 10px;
      height: 25px;
      border-radius: 3px;
      background: blue;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="slider" class="slider">
    <div class="thumb"></div>
  </div>
  <script>
    var slider = new Slider({
      elem: document.getElementById('slider')
    });

    function Slider(options) {
      var elem = options.elem;
      var thumbElem = elem.querySelector('.thumb');

      var sliderCoords, thumbCoords, shiftX, shiftY;

      elem.ondragstart = function() {
        return false;
      };

      elem.onmousedown = function(event) {
        if (event.target.closest('.thumb')) {
          startDrag(event.clientX, event.clientY);
          return false; // disable selection start (cursor change)
        }
      }

      function startDrag(startClientX, startClientY) {
        thumbCoords = thumbElem.getBoundingClientRect();
        shiftX = startClientX - thumbCoords.left;
        shiftY = startClientY - thumbCoords.top;

        sliderCoords = elem.getBoundingClientRect();

        document.addEventListener('mousemove', onDocumentMouseMove);
        document.addEventListener('mouseup', onDocumentMouseUp);
      }



      function moveTo(clientX) {
        // вычесть координату родителя, т.к. position: relative
        var newLeft = clientX - shiftX - sliderCoords.left;

        // курсор ушёл вне слайдера
        if (newLeft < 0) {
          newLeft = 0;
        }
        var rightEdge = elem.offsetWidth - thumbElem.offsetWidth;
        if (newLeft > rightEdge) {
          newLeft = rightEdge;
        }

        thumbElem.style.left = newLeft + 'px';
      }


      function onDocumentMouseMove(e) {
        moveTo(e.clientX);
      }

      function onDocumentMouseUp() {
        endDrag();
      }


      function endDrag() {
        document.removeEventListener('mousemove', onDocumentMouseMove);
        document.removeEventListener('mouseup', onDocumentMouseUp);
      }

    }
  </script>
</body>

</html>